<template>
	<view class="calendar">
		<view class="calendar-top">
			<view class="left_cal" @tap="preNextDate" data-next="0">
				<van-icon name="arrow-left"></van-icon>
				<!-- {{ monthShow ? '上一月' : '上一周' }} -->
			</view>
			<view class="date_time">{{ year }}年{{ month }}月</view>
			<view class="right_cal" @tap="preNextDate" data-next="1">
				<!-- {{ monthShow ? '下一月' : '下一周' }} -->
				<van-icon name="arrow"></van-icon>
			</view>
		</view>
		<view class="calendar-bottom">
			<view class="week-item" v-for="(item, index) in weekList" :key="index">
				{{ item }}
			</view>
			<view :class="(nowDay > item.date ? 'grayDate' : '') + ' day-box flex-center'"
				v-for="(item, index) in everyDay" :key="index">
				<view class="sigin-box" v-if="item.date">
					<!-- <view class="sigin-item {{nowDay > item.date?'sigin_now':nowDay == item.date?'is_sigin':'sigin_date'}}"> -->
					<view :class="'sigin-item ' + (item.isSigin ? 'sigin_item_is' : '')">
						<!-- 今天之前 -->
						<block v-if="nowDay > item.date">
							<view class="rl_item">
								<van-icon v-if="item.isSigin" size="50rpx" color="#f5dbaa"
									name="/static/img/yessigin.png"></van-icon>
								<van-icon v-if="!item.isSigin" size="50rpx" name="/static/img/nosigin.png"></van-icon>
							</view>
						</block>
						<!-- 今天 -->
						<block v-if="nowDay == item.date">
							<view class="rl_item">
								<van-icon v-if="item.isSigin" size="50rpx" name="/static/img/yessigin.png"></van-icon>
								<van-icon v-if="!item.isSigin" @tap.native="changeDate($event, { item })"
									:data-item="item" size="50rpx" color="#fff" name="/static/img/j_qian.png">
								</van-icon>
							</view>
						</block>
						<!-- 今天之后 -->
						<block v-if="nowDay < item.date">
							<view class="rl_item">
								<van-icon size="50rpx" name="/static/img/d_jifen.png" />
								<view class="jifen_num">+{{ item.points }}</view>
							</view>
						</block>
					</view>
					<view :class="'day-item ' + (nowDay == item.date ? 'data-item_day' : '')">
						{{ nowDay == item.date ? '今天' : item.day }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		$toast
	} from '@/utils/utils.js';
	export default {
		data() {
			return {
				weekList: ['日', '一', '二', '三', '四', '五', '六'],
				monthShow: true,
				year: 0,
				month: 0,
				day: 0,
				week: '',
				nowDay: '',
				selectDay: '',
				everyDay: [],
				JfData: []
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			monthSigin: {
				type: Array,
				default: []
			},
			monthJfData: {
				type: Array,
				default: []
			}
		},
		mounted() {
			// 处理小程序 attached 生命周期
			this.attached();
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			attached() {
				this.year = Number(this.getNowTime(new Date(), 2).slice(0, 4));
				this.month = Number(this.getNowTime(new Date(), 2).slice(5, 7));
				this.day = Number(this.getNowTime(new Date(), 2).slice(8, 10));
				this.nowDay = this.getNowTime(new Date());
				this.selectDay = this.getNowTime(new Date());
				if (uni.getSystemInfoSync().platform == 'ios') {
					this.getEveryDay(this.year + '/' + this.month + '/' + this.day);
				} else {
					console.log('年月', this.year + '-' + this.month);
					this.getEveryDay(this.year + '-' + this.month);
				}
			},

			// 获取当前日期
			getNowTime(time, type) {
				var date = time;
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = '0' + month) : '';
				day >= 0 && day <= 9 ? (day = '0' + day) : '';
				if (type == 1) {
					if (uni.getSystemInfoSync().platform == 'ios') {
						var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
					} else {
						var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
					}
				} else {
					var timer = year + '/' + month + '/' + day;
				}
				return timer;
			},

			getEveryDay(data) {
				let date = new Date(data);
				console.log('getEveryDay', date);
				let month = date.getMonth();
				//设置月份
				date.setMonth(month + 1);
				//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环
				date.setDate(0);
				let dayArry = [];
				let day = date.getDate(); //获取当前月最后一天是几号
				for (let i = 1; i <= day; i++) {
					date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天
					dayArry.push({
						day: i,
						week: this.getWeekday(date.getDay()),
						date: this.getNowTime(date)
					}); //选中月份的每一天和当天是星期几
				}
				this.everyDay = dayArry;
				console.log('getEveryDay---everyDay~~~~~~~', this.everyDay);
				this.resetDay();
			},

			getWeekday(day) {
				return ['日', '一', '二', '三', '四', '五', '六'][day];
			},

			//重置日期与顶部周期相对应
			resetDay() {
				let arr = this.weekList;
				let everyDay = this.everyDay;
				let w = everyDay[0]?.week;
				arr.forEach((v, index) => {
					if (v == w) {
						let id = index;
						if (id != 0) {
							for (let i = 0; i < id; i++) {
								everyDay.unshift({
									day: '',
									week: ''
								});
							}
						}
					}
				});
				this.everyDay = everyDay;
			},

			// 切换上一周月、下一周月
			preNextDate(e) {
				let next = e.currentTarget.dataset.next;
				if (this.monthShow) {
					if (next == 1) {
						let nowM = Number(this.getNowTime(new Date(), 2).slice(5, 7));
						if (this.month == nowM) {
							$toast('暂时不可查看下一个月');
							return;
						}
						// 下一月
						let month = this.month;
						let year = this.year;
						month += 1;
						this.month = month;
						year += 1;
						if (this.month > 12) {
							this.year = year;
							this.month = 1;
						}
						if (uni.getSystemInfoSync().platform == 'ios') {
							this.getEveryDay(this.year + '/' + this.month + '/' + 1);
						} else {
							this.getEveryDay(this.year + '-' + this.month);
						}
						let m = this.month < 10 ? '0' + this.month : this.month;
						let ym = this.year + '-' + m;
						this.$emit('changeMonth', {
							detail: {
								ym: ym
							}
						});
					} else {
						// 上一月
						let month = this.month;
						let year = this.year;
						month -= 1;
						this.month = month;
						if (this.month == 0) {
							year -= 1;
							this.month = 12;
							this.year = year;
						}
						if (uni.getSystemInfoSync().platform == 'ios') {
							this.getEveryDay(this.year + '/' + this.month + '/' + 1);
						} else {
							this.getEveryDay(this.year + '-' + this.month);
						}
						let m = this.month < 10 ? '0' + this.month : this.month;
						let ym = this.year + '-' + m;
						this.$emit('changeMonth', {
							detail: {
								ym: ym
							}
						});
					}
				}
			},

			// 选中日期
			changeDate(e) {
				let item = e.currentTarget.dataset.item;
				let day = item.date.split('/').join('-');
				this.$emit('handleSiginin', {
					detail: {
						day
					}
				});
			}
		},
		created: function() {},
		watch: {
			monthSigin: {
				handler: function(upArr) {
					console.log('updataSG---upArr----------', this.everyDay);
					let monArr = this.everyDay;
					upArr.forEach((item) => {
				 	monArr.forEach((mi) => {
							if (item.day == mi.day) {
								mi.isSigin = true;
							}
						});
					});
					this.everyDay = monArr;
				},

				immediate: true,
				deep: true
			},

			monthJfData: {
				handler: function(updata) {

					console.log('实时监听该数据---monthJfData', updata);
					this.JfData = updata;
					let monArr = this.everyDay;
					monArr.forEach((item) => {
						if (item.date) {
							let filterItem = updata.filter((f) => f.date == item.day);
							item.points = filterItem[0].points;
						}
					});
					this.everyDay = monArr;
				},

				immediate: true,
				deep: true
			}
		}
	};
</script>
<style>
	@import './calendar.css';
</style>
